import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, InputNumber, TreeSelect, Switch } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;

class AssetTypeModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation();
    this.props.form.resetFields();
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
        this.hideModelHandler();
      }
    });
  };

  render() {
    const { children, assetType, title,currentPid } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { name, pid_, serial, rack } = this.props.record;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const typeTreeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.assetType && d.assetType.length > 0 ? typeTreeData(d.assetType) : [];
        return d;
      })
    }

    const loop = data => data.map((item) => {
      if (item.assetType && item.assetType.length) {
        return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_+ ''}>{loop(item.assetType)}</TreeNode>;
      }
      return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''} />;
    });

    return (
        <span>
            <span onClick={this.showModelHandler}>
                { children }
            </span>
            <Modal
                maskClosable={false}
                confirmLoading={false}
                title={title}
                visible={this.state.visible}
                onOk={this.okHandler}
                onCancel={this.hideModelHandler}
            >
              <Form layout='horizontal' onSubmit={this.okHandler}>
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="资产分类名称"
                >
                  {
                    getFieldDecorator('name', {
                      initialValue: name,
                      rules: [{
                        required: true, whitespace: true, message: '请输入资产分类',
                      }]
                    })(<Input />)
                  }
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="上级资产分类"
                >
                  {
                    getFieldDecorator('pid', {
                      initialValue: typeof(currentPid)=="undefined" ? undefined : currentPid + '',
                      rules: [{
                        required: true, message: '请选择上级资产分类',
                      }]
                    })(
                      <TreeSelect
                        showSearch
                        treeNodeFilterProp="title"
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择上级资产分类"
                        notFoundContent="无匹配结果"
                        allowClear
                        treeData={typeTreeData(assetType)}
                        treeDefaultExpandAll
                      >
                        {/* <TreeNode key={assetType.id_} title={assetType.name} value={assetType.id_}>
                          { assetType.assetType && loop(assetType.assetType) }
                        </TreeNode> */}
                      </TreeSelect>
                    )
                  }
                </FormItem>
                <FormItem
                      label="是否机柜"
                      hasFeedback
                      {...formItemLayout}
                    >
                      {getFieldDecorator('rack', {
                        initialValue: rack || false,
                        valuePropName: 'checked',
                        rules: [
                          { type:'boolean', required: true, },
                        ],
                      })(
                        <Switch />
                      )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="编码"
                >
                  {
                    getFieldDecorator('serial', {
                      initialValue: serial,
                      rules: [{
                        max: 20, whitespace: true, message: '编号不能超过20个字',
                      }]
                    })(<Input />)
                  }
                </FormItem>
               
              </Form>
            </Modal> 
        </span>
    );
  }
}

export default Form.create()(AssetTypeModal);